<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="belongOrgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="项目名称：" prop="name" >
                        <Input type="text" class="query-form-el" v-model="dataToQuery.name" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <!-- <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text"  >展开∨</Button> -->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="mode === 'view'? '消防三同时详情':'消防三同时'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'588px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dataToView" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
                        <Row type="flex" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="项目名称：" prop="projectId" class="pos-rel" >
                                    <div v-if="mode === 'view'">{{dataToView.name}}</div>
                                    <Select v-else v-model="dataToView.projectId" :disabled="mode==='edit'">
                                        <Option v-for="item in projectList" :value="item.projectId" :key="item.projectId">{{ item.name }}</Option>
                                    </Select>
                                    <router-link v-if="mode == 'add'" to="/threeSimProject/create" class="pos-abs r0" style="top:-30px">新建项目</router-link>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" class="code-row-bg">
                            <Col span="23" >
                                <Tabs type="card" style="margin-top:20px;" class="threesim-tabs">
                                    <TabPane label="消防安全检查预评价">
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="承担单位：" prop="undertakeUnit" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.undertakeUnit}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.undertakeUnit" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="委托时间：" prop="entrustTime" >
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage1.entrustTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage1.entrustTime" type="date" placeholder="请输入" class="query-form-el"></DatePicker>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="审批/备案级别要求：" prop="entrustTime" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.recordRequirement}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.recordRequirement" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="业务类型：" prop="businessType" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.businessType}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.businessType" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="业务描述：" prop="businessDescription" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.businessDescription}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.businessDescription" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门：" prop="highestReply" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.highestReply}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.highestReply" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门级别：" prop="replyLevel" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage1.replyLevel}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage1.replyLevel" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门日期：" prop="replyTime" >
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage1.replyTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage1.replyTime" type="date" placeholder="请输入" class="query-form-el" placement="top-start"></DatePicker>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane label="消防安全防护设施设计">
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="承担单位：" prop="undertakeUnit" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.undertakeUnit}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.undertakeUnit" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="审批/备案级别要求：" prop="recordRequirement" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.recordRequirement}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.recordRequirement" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="业务类型：" prop="businessType" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.businessType}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.businessType" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="业务描述：" prop="businessDescription" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.businessDescription}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.businessDescription" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="审批/备案部门：" prop="entrustTime" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.highestReply}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.highestReply" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门级别：" prop="name" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage2.replyLevel}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage2.replyLevel" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>

                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门日期：" prop="name" class="query-form-el">
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage2.replyTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage2.replyTime" type="date" placeholder="请输入" class="query-form-el" placement="top-start"></DatePicker>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" ></Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane label="消防安全设施验收">
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="控评承担单位：" prop="undertakeUnit" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.undertakeUnit}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.undertakeUnit" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="控评委托时间：" prop="entrustTime" >
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage4.entrustTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage4.entrustTime" type="date" placeholder="请输入" class="query-form-el"></DatePicker>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="验收实际完成日期：" prop="endTime" >
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage4.endTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage4.endTime" type="date" placeholder="请输入" class="query-form-el"></DatePicker>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="审批/备案级别要求：" prop="entrustTime" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.recordRequirement}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.recordRequirement" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="业务类型：" prop="businessType" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.businessType}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.businessType" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="业务描述：" prop="businessDescription" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.businessDescription}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.businessDescription" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="审批/备案部门：" prop="highestReply" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.highestReply}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.highestReply" ></Input>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门级别：" prop="replyLevel" >
                                                    <div v-if="mode === 'view'">{{dataToView.stage4.replyLevel}}</div>
                                                    <Input v-else type="text" v-model="dataToView.stage4.replyLevel" ></Input>
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row type="flex" justify="space-around" class="code-row-bg">
                                            <Col span="11" >
                                                <FormItem label="批复/备案部门日期：" prop="replyTime" >
                                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.stage4.replyTime)}}</div>
                                                    <DatePicker v-else v-model="dataToView.stage4.replyTime" type="date" placeholder="请输入" class="query-form-el"></DatePicker>
                                                </FormItem>
                                            </Col>
                                            <Col span="11" ></Col>
                                        </Row>
                                    </TabPane>
                                </Tabs>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dataToView')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'

    export default {
        name: "saFireThreeSim",
        components:{
            cascaderDom
        },
        data() {
            return{
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {
                        title: '企业名称',
                        width: 340,
                        align: 'center',
                        key:'companyName',
                    },
                    {
                        title: '项目名称',
                        minWidth: 150,
                        align: 'center',
                        key:'name'
                    },
                    {
                        title: '项目分类',
                        width: 180,
                        align: 'center',
                        key:'category'
                    },
                    {
                        title: '项目类型',
                        width: 180,
                        align: 'center',
                        key:'type'
                    },
                    {
                        title: '项目当前阶段',
                        width: 180,
                        align: 'center',
                        key:'cruStage'
                    },
                    {
                        title: '项目开始时间',
                        width: 180,
                        align: 'center',
                        key:'startTime',
                        render: this.renderCellDate
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {fontSize: '14px'},
                                    on: {
                                        click: () => {
                                            this.showData(params,1);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', { props: { type: 'vertical' } }, ''),
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {fontSize: '14px'},
                                    on: {
                                        click: () => {
                                            this.showData(params,2);
                                        }
                                    }
                                }, '修改'),
                            ]);
                        }
                    },
                ],
                ruleCustom : {},
                defaultEditMode: {
                    simType:3,
                    stage1:{stage:1},
                    stage2:{stage:2},
                    stage4:{stage:4}
                },
                dataToView:this.defaultEditMode,
            }
        },
        mounted() {
            this.setTableHeight();
            this.query();
            this.dataToView = this.defaultEditMode;
            this.loadProjectList();
        },
        methods:{
            ...pageCommonFunction,
            createEmptyDataToAdd() {
                return this.defaultEditMode;
            },
            deleteData(params) {
                this.$http.delete(Api.threeSimDetail + '/' + params.row.projectId + '/simtype/' + this.dataToView.simType +'/delete').then((res) => {
                    if (res.data.status === 200) {
                        this.$Message.success('成功');
                        this.query()
                    }else if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            loadProjectList() {
                let url = Api.selectThreeSimProject;
                this.$http.get(url).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.projectList = res.data.data;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            query() {
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.dataToQuery)));

                let url = Api.queryThreeSimProject;
                this.$http.get(url, {params: data}).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            showData(data, flag) {
                this.dataToView = {simType:3};
                this.$http.get(Api.threeSimDetail + '/' + data.row.projectId + '/simtype/' + this.dataToView.simType +'/get').then((res) => {
                    if (res.data.status === 200) {
                        if (flag == 1) {
                            this.mode = 'view';
                        } else {
                            this.mode = 'edit';
                        }this.dialogShow = true;
                        this.dataToView = this.convertResponseToViewModel(res.data.data);
                        this.dataToView = Object.assign(this.dataToView, data.row);
                    }else if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                        this.dialogShow = false;
                    }
                }).catch(e => {
                    this.dialogShow = false;
                    this.query();
                    this.$Message.error("数据获取失败")
                })
            },
            convertResponseToViewModel(res) {
                const dataToView = this.defaultEditMode;
                dataToView.stage1 = {};
                dataToView.stage2 = {};
                dataToView.stage3 = {};
                dataToView.stage4 = {};
                for(var i = 0; i < res.length; i++) {
                    let data = res[i];
                    switch (data.stage) {
                        case "1":
                            dataToView.stage1 = data;
                            break;
                        case "2":
                            dataToView.stage2 = data;
                            break;
                        case "4":
                            dataToView.stage4 = data;
                            break;
                    }
                }
                return dataToView;
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        const data = [];
                        data.push(this.dataToView.stage1);
                        data.push(this.dataToView.stage2);
                        data.push(this.dataToView.stage4);
                        console.log(this.dataToView);
                        this.$http.post(Api.threeSimDetail + '/' + this.dataToView.projectId + '/simtype/' + this.dataToView.simType +'/add', data).then((res) => {
                            if (res.data.status === 200) {
                                this.$Message.success('成功');
                                this.dialogShow = false;
                                this.query()

                            }else if (res.data.status === 201) {
                                this.$Message.error(res.data.msg);
                                this.dialogShow = false;
                            }
                        }).catch(e => {
                            this.dialogShow = false;
                            this.query();
                            this.$Message.error("数据获取失败")
                        })
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            }
        },
        watch:{
        },
    }
</script>

<style lang='css' scoped>
    /deep/ .threesim-tabs .ivu-tabs-tab {
        font-size: 13px;
        line-height: 24px;
    }
</style>
